<template>
  <div :style="{ '--color': `${background_color}` }">
    <c-title :hide="false" :text="classifyName"></c-title>
    <van-sticky offset-top="40">
      <van-search show-action v-model="keyword" placeholder="请输入搜索关键词" shape="round" @blur="searchBlur" @focus="hidebox"  >
        <template #action>
          <div @click="searchChange" class="searchBtn">搜索</div>
        </template>
      </van-search>
      <!-- 搜索历史 -->
      <div style="background: #fff;">
        <!-- 动态获取到soso的高度，需要 元素显示隐藏，页面重绘 -->
        <!-- <div v-show="pageReload"></div> -->
        <transition name="fateOut" v-on:enter="fateOutEnter" v-on:after-leave="fateOutLeave">
          <sarchHistory v-show="showHistory" :isShowDelete="false" :storageName="storageName" ref="searchHistory" @clickTag="serachTag"></sarchHistory>
        </transition>
      </div>
      <div class="tab-list">
        <van-tabs v-model="tabActive" @change="categorysChange" title-active-color="#E32323" title-inactive-color="#333333" v-if="categorys.length > 1">
          <block v-for="(item, index) in categorys" :key="index">
            <van-tab :title="item.name" :name="item.id"></van-tab>
          </block>
        </van-tabs>
      </div>
    </van-sticky>
    <div class="brand-main" v-if="false">
      <div class="brand-title">品牌大全</div>
      <div class="brand-list flex-j-sb">
        <block v-for="(item, index) in getBrand" :key="item.id" class="brand-item flex-a-c" v-if="index < brandNum">
          <div class="brand-wrap flex-a-c" @click="brandClick(item.id)">
            <img :src="item.logo" />
            <span class="brand-text">{{ item.name }}</span>
          </div>
        </block>
        <div class="brand-item brand-item-more flex-j-c flex-a-c" @click="exhibitionOn" v-if="getBrand.length > brandNum">
          <span>更多</span>
          <span class="iconfont icon-member-top"></span>
        </div>
      </div>
      <div class="brand-more" v-if="getBrand.length === brandNum" @click="packup">
        <span>收起</span>
        <span class="iconfont icon-member-bottom"></span>
      </div>
    </div>

    <div class="classify-goodsList flex-j-sb" v-if="goodsList.length > 0">
      <block v-for="(item, index) in goodsList" :key="item.id">
        
        <index-goods :goodsItem="item" :city="query.city"></index-goods>
      </block>
    </div>
    <van-empty description="暂无数据" v-else />
  </div>
</template>
<script>
import classify_controller from "./classify_controller.js";
export default classify_controller;
</script>
<style lang="scss" scoped>
.tab-list {
  padding: 0 0.75rem 0.5rem 0.75rem;
  background-color: #fff;
}

/* 搜索商品列表样式 */
.classify-goodsList {
  flex-wrap: wrap;
  padding: 0.75rem 0.75rem 0 0.75rem;
}

/* 品牌大全样式 */
.brand-main {
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.75rem 0.75rem 0 0.75rem;

  .brand-title {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.375rem;
    color: #333;
    padding: 0.75rem;
  }

  .brand-list {
    flex-wrap: wrap;
    transition: 1s;
  }

  .brand-item {
    flex: 0 0 calc((100% - 2.75rem) / 4);
    width: 2.75rem;
    margin-bottom: 0.6875rem;
    flex-direction: column;

    &:nth-child(4) {
      margin-right: 0;
    }

    img {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 0.25rem;
    }

    .brand-text {
      font-size: 0.625rem;
      line-height: 0.875rem;
      padding: 0.25rem 0 0 0;
      color: #333;
    }

    .brand-wrap {
      flex-direction: column;
    }
  }

  .brand-item-more {
    flex-direction: row;
    font-size: 0.75rem;
    line-height: 1.0625rem;
    color: #999;
  }
}

.brand-list {
  &::after {
    content: "";
    height: 0;
    width: calc((100% - 2.75rem) / 4);
  }
}

.brand-more {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.0625rem;
  color: #999;
  padding: 0 0 0.75rem 0;
}

.searchBtn {
  font-size: 0.75rem;
  line-height: 1.03rem;
  color: #fff;
  padding: 0.25rem 1rem;
  background: var(--color);
  border-radius: 1.09rem;
}
</style>
